<template>
    <div class="user-login-5"
         v-loading.fullscreen.lock="loading"
         :element-loading-text="loadingMsg"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-row>
            <el-col :sm="24" :md="12">
                <!--<div class="login-bg" style="background-image:url('/assets/imgs/login/bg3.jpg')"></div>-->
                <swiper ref="mySwiper" :options="swiperOptions" v-if="inited">
                    <swiper-slide>
                        <div class="login-bg" :style="{ backgroundImage: 'url(' + img1 + ')' }"></div>
                    </swiper-slide>
                    <swiper-slide>
                        <div class="login-bg" :style="{ backgroundImage: 'url(' + img2 + ')' }"></div>
                    </swiper-slide>
                    <swiper-slide>
                        <div class="login-bg" :style="{ backgroundImage: 'url(' + img3 + ')' }"></div>
                    </swiper-slide>
                    <!--<div class="swiper-pagination" slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>-->
                </swiper>
            </el-col>
            <el-col :sm="24" :md="12">
                <div class="login-content">
                    <div class="login-form">
                        <div class="logo-img-wrap" v-if="projectImg">
                            <img :src="projectImg"/>
                        </div>
                        <h1 v-text="project.project_name || '后台管理系统'"></h1>
                        <p v-text="project.project_desc || '欢迎登录后台管理系统'" style="margin-top:10px;"></p>
                        <el-form style="width: 300px;margin: 30px auto;">
                            <el-form-item>
                                <el-input placeholder="用户名" name="account" required
                                          v-model="account" @keyup.enter.native="submit"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input placeholder="密码" name="password" required type="password"
                                          v-model="password" @keyup.enter.native="submit"></el-input>
                            </el-form-item>
                            <el-form-item prop="captcha">
                                <el-input placeholder="验证码" name="captcha" required
                                          v-model="captcha" @keyup.enter.native="submit">
                                    <div slot="append" v-html="loginCaptchaSvg" class="login-captcha-demo" @click="loadLoginCaptcha"></div>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit()" style="width:100%"> 登 录 </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="login-copyright text-right">
                        <p>Copyright &copy; JUZHILE.CC 2018</p>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios';
    import { mapActions } from 'vuex';
    import _ from 'lodash';

    // import img1 from '@/assets/images/login/bg3.jpg'
    // import img2 from '@/assets/images/login/bg2.jpg'
    // import img3 from '@/assets/images/login/bg1.jpg'

    export default {

        data() {
            return {
                projectId: null,
                project: {},
                account: '',
                password: '',
                captcha: '',
                loginCaptchaSvg: '',

                loading: false,
                loadingMsg: '加载中，请稍后...',
                inited: false,
                img1: "/assets/images/login/bg3.jpg",
                img2: "/assets/images/login/bg2.jpg",
                img3: "/assets/images/login/bg1.jpg",

                swiperOptions: {
                    // spaceBetween: 30,
                    // centeredSlides: true,
                    observer:true,          //修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,    //修改swiper的父元素时，自动初始化swiper
                    loop : true,
                    autoplay: true
                    /*pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }*/
                }
            }
        },
        created () {
            this.projectId = this.$route.params.projectId;
            this.initProjectInfo();
        },
        computed: {
            projectImg() {
                return _.get(this.project, 'project_logo') // || '/assets/imgs/logo.png';
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.loadLoginCaptcha();
                this.inited = true;
            })
        },
        methods: {
            ...mapActions([
                'initLoginUser'
            ]),
            showLoading(msg) {
                this.loading = true;
                this.loadingMsg = msg;
            },
            hideLoading() {
                this.loading = false;
            },
            async initProjectInfo(){

                if(!this.projectId) {
                    return;
                }

                let project = await this.$japi.project.getProject(this.projectId);

                if(project) this.project = data;
            },
            async submit(){
                if (!this.account || !this.password || !this.captcha) {
                    this.$jui.toast('用户名/密码/验证码不能为空！');
                    return;
                }
                this.showLoading('登录中，请稍后。。。');

                let data = await this.$jeapi.admin.login(this.account, this.password, this.captcha);

                this.hideLoading();
                if (data) {
                    await this.initLoginUser(data);
                    this.$router.replace({
                        path: '/',
                        replace: true
                    });
                } else {
                    this.loadLoginCaptcha();
                }
            },
            async loadLoginCaptcha() {
                let ret = await this.$japi.passport.getCaptcha("login");
                this.loginCaptchaSvg = ret;
            },
        }
    }
</script>

<style scoped>
    .user-login-5 {
        background: #FFF;
    }
    .logo-img-wrap {
        height:120px;
        margin-bottom: 8%;
        overflow: hidden;
    }
    .logo-img-wrap img{
        max-width: 300px;
        max-height:120px;
    }
    .login-content {
        text-align: center;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
    }
    .login-form {
        flex: 1;
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
    }
    .login-bg {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 100vh;
    }

</style>
<style lang="scss">
    .login-captcha-demo {
        height: 36px;
        width: 100px;
        margin-left: -15px;
        margin-right: -15px;

        svg {
            width: 100%;
            height: 100%;
        }
    }
</style>
